//回填域
import React, { useState, useRef, useEffect } from "react";
import { useFormField } from "../../context/form-context";
import { getBackFillAreaValue } from "../../utils";//获得意见回填域的值
import "./BackFillArea.css";

let defaultConfig = {
  //这一批属性来源 tplData.form.data_control （步骤权限）
  // "code": "yijianhuitian",
  // "name": "意见回填",
  // "type": "opinion_backfill_area",
  // "is_show": true,
  // "is_editable": false,
  // "is_required": false,

  //这一批属性来源 tplData.form.form_meta_data （表单设计器）
  // "isUsed": false,
  // "designProps": {
  //     "code": "yijianhuitian",
  //     "name": "意见回填",
  //     "ui": "wfd_opinionBackFillArea",
  //     "title": "意见回填",
  //     "layout": "control_layout_leftRight",
  //     "defaultValue": "",
  //     "text": "",
  //     "groupTitle": "",
  //     "byTableGroupTitle": false,
  //     "tipstext": true,
  //     "type": "opinion_backfill_area",
  //     "title_w": 85,
  // },
  
  //这一批属性来源 tplData.form.data_define （业务对象）
  // "show_type": "",
  // "show_type_name": "",
  // "props": [],
  // "type_name": "意见回填",
  
  //来源 tplData.form.defaultValueConf
  // "default": null
}

export default function ({ field, label, rules, showLabel = true, required, labelCol, cell, rowIndex, ...others }) {

  const { input } = useFormField({
    field,
  });
  const [backFilWidth, setBackFilWidth] = useState({
    width: "100%",
  }); //审批意见默认宽度

  const backFillRef = useRef({});

  useEffect(() => {
    /*
    更新意见回填域-审批意见的宽度
    1.意见回填域字段宽度 < 240，意见区域宽度设置为100%
    2.意见回填域字段宽度 >= 240，意见区域宽度设置为 意见回填域字段宽度 - 168（168是签章图片的宽度）
  */

    const $backFill = backFillRef;
    const backFillWidth = $backFill.current.clientWidth; //意见回填域dom宽度
    let opinionWidth = backFillWidth - 168 + "px";
    if (backFillWidth < 240) {
      //如果回填域区域宽度小于240
      opinionWidth = "100"; //就把审批意见宽度设置为100%
    }
    setBackFilWidth({
      width: opinionWidth,
    });
    //更新审批意见宽度
  }, []);

  //意见回填域dom
  function getDataText(value) {

    /**
     * 后端生成意见回填记录，依赖了前端tplData.form.form_data里面字段的值，并且发起前会调用fromReload接口，把意见回填字段设置null
     * 所以这里前端显示在界面上，不能依赖tplData.form.form_data的值，需要把最后一次有内容的值给缓存住，后续触发表单更新，始终以上一次有内容的结果为准
     * 如果后续后端优化生成审批意见的逻辑，这段代码可同步删掉，以后端给的值为准
     */
    if(value){//如果value有值，则把当前value做一个缓存
      if(!window.__backFillCache__){
        window.__backFillCache__ = {};
      }
      window.__backFillCache__[field] = value;
    }else{//没有值，则尝试从缓存内取
      value = window?.__backFillCache__?.[field];
    }

    //对回填域的数据进行清洗，后端返回的不是一个数组
    let list = getBackFillAreaValue({
      value
    });
    if (!list.length) {
      return null;
    }

    return list.map(function (item, index) {
      let isAllAnon = item.isAllAnon ? "text-color-666" : ""; //如果当前节点包含isAllAnon，审批意见置灰显示
      let signatureImage = null;
      //如果有签章就显示
      if (item.signature_image) {
        signatureImage = (
          <div data-des="签章" className="signature ml-2" style={{"flex": "0 0 168px"}}>
            <img className="object-contain " src={item.signature_image} />
          </div>
        );
      }
      return (
        <div key={index} ref={backFillRef} className="text-left">
          <div className="flex justify-between">
            <div
              data-des="审批意见"
              className={"text-justify whitespace-pre-wrap" + isAllAnon}
              dangerouslySetInnerHTML={{ __html: item.opinion }}
              // style={item.signature_image ? backFilWidth : null}
            ></div>
            {signatureImage}
          </div>
          <div className="overflow-hidden mt-5px">
            <div data-des="审批 人名称" className="float-left truncate">
              {item.name ? item.name : item.org}
            </div>
            <div data-des="审批时间" className="float-right text-right truncate timeWarp">
              {item.operate_time}
            </div>
          </div>
          {item.name ? (
            <div data-des="审批部门" className="overflow-hidden truncate mt-3px">
              {item.org}
            </div>
          ) : null}
          {list && list.length > 1 && index != list.length - 1 ? <hr className="mb-10px mt-8px"></hr> : null}
        </div>
      );
    });
  }

  return input.value === undefined ? null : getDataText(input.value, cell);
}
